<!--  @author:ymy  -->
<template>
  <div class="blive">
    <div class="quickLive">
      <h2 class="blive-title">
        <strong>即将直播</strong>
      </h2>
      <div class="blive-live">
        <div
          :class="{ 'big-live': index === 0, 'normal-live': index !== 0 }"
          v-for="(item, index) in live"
          :key="item.id"
        >
          <div class="big-img normal-img">
            <img
              :src="
                'https://ss.lanqb.com/' + (index === 0 ? item.posters.detail_m_banner : item.cover)
              "
              alt=""
            />
            <span class="little-span">第{{ item.periods }}期</span>
          </div>
          <div class="big-content normal-content">
            <h4>{{ item.title }}</h4>
            <div class="big-user normal-user">
              <img :src="'https://ss.lanqb.com/' + item.profile.avatar" alt="" />
              <span>{{ item.profile.nickname }}</span>
            </div>
            <p>时间：{{ item.begin_at }}</p>
            <p>{{ item.statistic.purchases }}人感兴趣</p>
            <span v-show="index == 0">立即报名</span>
          </div>
        </div>
      </div>
    </div>
    <div class="afterLive">
      <h2 class="blive-title">
        <strong>往期直播</strong>
      </h2>
      <div class="blive-live">
        <div :class="{ 'normal-live': true }" v-for="item in course" :key="item.id">
          <div class="big-img normal-img">
            <img :src="'https://ss.lanqb.com/' + item.posters.app" alt="" />
            <span class="little-span" v-show="item.periods !== 0">第{{ item.periods }}期</span>
          </div>
          <div class="big-content normal-content">
            <h4>{{ item.title }}</h4>
            <div class="big-user normal-user">
              <img :src="'https://ss.lanqb.com/' + item.user_profile.avatar" alt="" />
              <span>{{ item.user_profile.nickname }}</span>
            </div>
            <p>时间：{{ item.begin_at }}</p>
            <p>{{ item.statistic.purchases }}人感兴趣</p>
            <span v-show="false">立即报名</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Blive',
  data() {
    return {};
  },
  props: ['course', 'live'],
  computed: {
    item1() {
      return this.live[0];
    },
    item2() {
      return this.live[1];
    },
    item3() {
      return this.live[2];
    },
  },
};
</script>
<style lang="less" scoped>
.blive {
  background-color: #f4f4f4;
  > .quickLive {
    > .blive-title {
      font-size: 0.15rem;
      padding-left: 0.25rem;
      margin: 0.25rem 0 0.15rem;
      position: relative;
    }
    .blive-title::before {
      position: absolute;
      top: 0.08rem;
      left: 0.15rem;
      width: 0.05rem;
      height: 0.05rem;
      background-color: #edce8c;
      content: '';
    }
    > .blive-live {
      padding: 0 0.15rem;
      > .big-live {
        width: 3.45rem;
        height: 2.9rem;
        > .big-img {
          width: 100%;
          height: 1.665rem;
          position: relative;
          img {
            width: 100%;
            height: 1.665rem;
            border-top-left-radius: 0.1rem;
            border-top-right-radius: 0.1rem;
          }
          > .little-span {
            position: absolute;
            top: 0.06rem;
            left: 0.06rem;
            background-color: rgba(0, 0, 0, 0.4);
            font-size: 0.12rem;
            color: white;
            padding: 0.03rem;
            border-radius: 0.05rem;
            line-height: 1.5;
          }
        }
        > .big-content {
          padding: 0.1rem 0.1rem 0.225rem;
          background-color: white;
          border-radius: 0.1rem;
          position: relative;
          > h4 {
            font-size: 0.15rem;
            color: #333;
            margin-bottom: 0.05rem;
          }
          > .big-user {
            height: 0.25rem;
            line-height: 0.25rem;
            display: flex;
            margin-bottom: 0.04rem;
            img {
              width: 0.25rem;
              height: 0.25rem;
              border-radius: 50%;
              vertical-align: top;
            }
            span {
              display: inline-block;
              margin-left: 0.05rem;
              height: 0.25rem;
              font-size: 0.13rem;
              line-height: 0.25rem;
              vertical-align: top;
            }
          }
          > p {
            font-size: 0.12rem;
            color: #9f9f9f;
            margin-bottom: 0.03rem;
          }
          > p:last-child {
            margin-bottom: 0;
          }
          > span {
            text-align: center;
            position: absolute;
            right: 0.25rem;
            bottom: 0.2rem;
            width: 0.86rem;
            height: 0.32rem;
            font-size: 0.12rem;
            line-height: 0.32rem;
            color: #634b19;
            background: #edce8c;
            background-image: linear-gradient(180deg, #f7e9c0, #edce8c);
            border-radius: 0.6rem;
            box-shadow: 0 0.066667rem 0.333333rem rgb(0 0 0 / 8%);
          }
        }
      }
      > .normal-live {
        width: 3.45rem;
        height: 1.05rem;
        background-color: white;
        border-radius: 0.1rem;
        margin-top: 0.1rem;
        padding: 0.1rem 0;
        display: flex;
        // justify-content: space-between;
        > .normal-img {
          width: 1.4rem;
          height: 1.05rem;
          position: relative;
          img {
            width: 1.4rem;
            height: 1.05rem;
          }
          > .little-span {
            position: absolute;
            top: 0.06rem;
            left: 0.06rem;
            background-color: rgba(0, 0, 0, 0.4);
            font-size: 0.12rem;
            color: white;
            padding: 0.03rem;
            border-radius: 0.05rem;
            line-height: 1.5;
          }
        }
        > .normal-content {
          margin-left: 0.1rem;
          h4 {
            font-size: 0.13rem;
            display: inline-block;
            height: 0.37rem;
          }
          > .normal-user {
            img {
              width: 0.17rem;
              height: 0.17rem;
              border-radius: 50%;
            }
            span {
              vertical-align: top;
              font-size: 0.12rem;
            }
          }
          > p {
            font-size: 0.12rem;
            color: #9f9f9f;
            margin-bottom: 0.1rem;
          }
        }
      }
    }
  }
  > .afterLive {
    > .blive-title {
      font-size: 0.15rem;
      padding-left: 0.25rem;
      margin: 0.25rem 0 0.15rem;
      position: relative;
    }
    .blive-title::before {
      position: absolute;
      top: 0.08rem;
      left: 0.15rem;
      width: 0.05rem;
      height: 0.05rem;
      background-color: #edce8c;
      content: '';
    }
    > .blive-live {
      padding: 0 0.15rem;
      > .big-live {
        width: 3.45rem;
        height: 2.9rem;
        > .big-img {
          width: 100%;
          height: 1.665rem;
          position: relative;
          img {
            width: 100%;
            height: 1.665rem;
            border-top-left-radius: 0.1rem;
            border-top-right-radius: 0.1rem;
          }
          > .little-span {
            position: absolute;
            top: 0.06rem;
            left: 0.06rem;
            background-color: rgba(0, 0, 0, 0.4);
            font-size: 0.12rem;
            color: white;
            padding: 0.03rem;
            border-radius: 0.05rem;
            line-height: 1.5;
          }
        }
        > .big-content {
          padding: 0.1rem 0.1rem 0.225rem;
          background-color: white;
          border-radius: 0.1rem;
          position: relative;
          > h4 {
            font-size: 0.15rem;
            color: #333;
            margin-bottom: 0.05rem;
          }
          > .big-user {
            height: 0.25rem;
            line-height: 0.25rem;
            display: flex;
            margin-bottom: 0.04rem;
            img {
              width: 0.25rem;
              height: 0.25rem;
              border-radius: 50%;
              vertical-align: top;
            }
            span {
              display: inline-block;
              margin-left: 0.05rem;
              height: 0.25rem;
              font-size: 0.13rem;
              line-height: 0.25rem;
              vertical-align: top;
            }
          }
          > p {
            font-size: 0.12rem;
            color: #9f9f9f;
            margin-bottom: 0.03rem;
          }
          > p:last-child {
            margin-bottom: 0;
          }
          > span {
            text-align: center;
            position: absolute;
            right: 0.25rem;
            bottom: 0.2rem;
            width: 0.86rem;
            height: 0.32rem;
            font-size: 0.12rem;
            line-height: 0.32rem;
            color: #634b19;
            background: #edce8c;
            background-image: linear-gradient(180deg, #f7e9c0, #edce8c);
            border-radius: 0.6rem;
            box-shadow: 0 0.066667rem 0.333333rem rgb(0 0 0 / 8%);
          }
        }
      }
      > .normal-live {
        width: 3.45rem;
        height: 1.05rem;
        background-color: white;
        border-radius: 0.1rem;
        margin-top: 0.1rem;
        padding: 0.1rem 0;
        display: flex;
        // justify-content: space-between;
        > .normal-img {
          width: 1.4rem;
          height: 1.05rem;
          position: relative;
          img {
            width: 1.4rem;
            height: 1.05rem;
          }
          > .little-span {
            position: absolute;
            top: 0.06rem;
            left: 0.06rem;
            background-color: rgba(0, 0, 0, 0.4);
            font-size: 0.12rem;
            color: white;
            padding: 0.03rem;
            border-radius: 0.05rem;
            line-height: 1.5;
          }
        }
        > .normal-content {
          margin-left: 0.1rem;
          h4 {
            font-size: 0.13rem;
            display: inline-block;
            height: 0.37rem;
          }
          > .normal-user {
            img {
              width: 0.17rem;
              height: 0.17rem;
              border-radius: 50%;
            }
            span {
              vertical-align: top;
              font-size: 0.12rem;
            }
          }
          > p {
            font-size: 0.12rem;
            color: #9f9f9f;
            margin-bottom: 0.1rem;
          }
        }
      }
    }
  }
}
</style>
